<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./src/vue.js"></script>
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #app {
        width: 100vw;
        height: 100vh;
      }
      .lqb_tabs {
        display: flex;
        align-items: center;
        height: 50px;
        overflow-x: scroll;
        width: 100vw;
        background-color: lightblue;
        position: fixed;
        top: 0;
        left: 0;
      }
      .lqb_tabs::-webkit-scrollbar {
        display: none;
      }
      .lqb_tabs > .lqb_tabs_item {
        padding: 0 10px;
        flex-shrink: 0;
      }
      .lqb_tabs_item.active_item {
        font-size: 20px;
        font-weight: bolder;
      }
      .main {
        padding: 10px;
        padding-top: 50px;
        height: 100vh;
        box-sizing: border-box;
        overflow: hidden;
      }
      .lqb_cates {
        overflow-y: scroll;
        height: 100vh;
      }
      .lqb_cates::-webkit-scrollbar {
        display: none;
      }
      .lqb_pick_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        padding: 0 10px;
      }
      .lqb_pick_title > span {
        color: gray;
      }
      .lqb_item {
        display: flex;
        height: 112px;
        margin: 10px 0;
      }
      .lqb_item > img {
        width: 150px;
        height: 112px;
      }
      .lqb_item > div {
        width: 176px;
        margin-left: 10px;
      }
      .lqb_item_info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .lqb_item_info > h3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
        overflow: hidden;
      }
      .lqb_item_info > span {
        font-size: 12px;
        color: gray;
      }
      .lqb_theme {
        display: flex;
      }
      .lqb_themes {
        display: flex;
        flex-wrap: wrap;
      }
      .lqb_themes > div {
        margin-right: 10px;
        color: gray;
        font-size: 14px;
        margin-bottom: 10px;
      }
      .lqb_cates_search {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
      }
      .lqb_cates_search > input {
        width: 300px;
        height: 40px;
        outline: none;
        border: 1px solid lightblue;
      }
      .lqb_theme > h4 {
        width: 50px;
        flex-shrink: 0;
      }
      .lqb_loading {
        height: 60px;
        text-align: center;
        line-height: 60px;
        color: blue;
        font-size: 14px;
      }
      .lqb_pick_first {
        margin-bottom: 50px;
      }
      .lqb_filter_active {
        color: blue !important;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 分类选项卡 -->
      <lqb-tabs></lqb-tabs>
      <!-- 动态组件内容 -->
      <div class="main">
        <component :is="comName"></component>
      </div>
    </div>
    <template id="lqb_tabs">
      <div class="lqb_tabs">
        <div
          :class="{lqb_tabs_item: true, active_item: tabIdx == 111}"
          @click="changeTabs(111)"
        >
          分类
        </div>
        <div
          :class="{lqb_tabs_item: true, active_item: tabIdx == 222}"
          @click="changeTabs(222)"
        >
          精选
        </div>
        <div
          :class="{lqb_tabs_item: true, active_item: tabIdx == tab.id}"
          @click="changeTabs(tab.id)"
          v-for="tab in tabs"
          :key="tab.id"
        >
          {{tab.name}}
        </div>
      </div>
    </template>
    <template id="lqb_cates">
      <div class="lqb_cates" @scroll="loadMore">
        <div class="lqb_cates_search">
          <input type="text" placeholder="输入关键字" />
        </div>
        <div class="lqb_theme">
          <h4>主题</h4>
          <div class="lqb_themes">
            <div :class="{lqb_filter_active: isCheckAll}">全部</div>
            <div
              @click="changeTheme(theme)"
              v-for="theme in themes"
              :key="theme.id"
              :class="{lqb_filter_active: themesItem.indexOf(theme.id) !== -1}"
            >
              {{theme.name}}
            </div>
          </div>
        </div>
        <div
          class="lqb_sort"
          style="
            display: flex;
            height: 60px;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div style="display: flex">
            <h4 style="margin-right: 20px">排序</h4>
            <div
              :class="{lqb_filter_active: curType === 2}"
              style="margin: 0 5px"
              @click="changeSortType(2)"
            >
              综合
            </div>
            <div
              :class="{lqb_filter_active: curType === 1}"
              style="margin: 0 5px"
              @click="changeSortType(1)"
            >
              最新
            </div>
            <div
              :class="{lqb_filter_active: curType === 3}"
              style="margin: 0 5px"
              @click="changeSortType(3)"
            >
              最热
            </div>
          </div>
          <div style="color: blue">⬇更多筛选</div>
        </div>
        <div class="lqb_pick_first">
          <lqb-item
            :course="pick"
            v-for="pick in cates"
            :key="pick.id"
          ></lqb-item>
          <div class="lqb_loading" v-show="isloading">加载中...</div>
        </div>
      </div>
    </template>
    <template id="lqb_pick">
      <div class="lqb_pick">
        <div class="lqb_pick_first">
          <div class="lqb_pick_title">
            <h3>精选课程</h3>
            <span>筛选课程&gt;</span>
          </div>
          <lqb-item
            :course="pick"
            v-for="pick in picks"
            :key="pick.id"
          ></lqb-item>
        </div>
        <div class="lqb_pick_first">
          <div class="lqb_pick_title">
            <h3>最新上架</h3>
            <span>查看更多&gt;</span>
          </div>
          <lqb-item
            :course="pick"
            v-for="pick in news"
            :key="pick.id"
          ></lqb-item>
        </div>
        <div class="lqb_pick_first">
          <div class="lqb_pick_title">
            <h3>限时免费</h3>
          </div>
          <lqb-item
            :course="pick"
            v-for="pick in frees"
            :key="pick.id"
          ></lqb-item>
        </div>
      </div>
    </template>
    <template id="lqb_common">
      <div class="lqb_common">
        <h1>其它</h1>
      </div>
    </template>
    <template id="lqb_item">
      <div class="lqb_item">
        <img
          class="lqb_img"
          :src="`https://ss.lanqb.com/${course.posters.mobile}`"
        />
        <div class="lqb_item_info">
          <h3 style="font-size: 12px">{{course.title}}</h3>
          <p style="display: flex; justify-content: space-between">
            <span>{{course.profile.nickname}}</span>
            <span>共{{course.preview_setting.lessons_count}}节</span>
          </p>
          <span>{{course.study_num}}人在学</span>
        </div>
      </div>
    </template>
    <script>
      Vue.config.devtools = false;
      Vue.config.productionTip = false;
      const lqbItem = {
        template: "#lqb_item",
        props: ["course"],
      };
      // 封装请求工具
      function request(url) {
        return new Promise((resolve, reject) => {
          fetch(url)
            .then(resp => resp.json())
            .then(data => {
              resolve(data);
            });
        });
      }

      // 自定义tabs组件
      const lqbTabs = {
        template: "#lqb_tabs",
        data() {
          return {
            tabs: [],
            tabIdx: 222,
          };
        },
        methods: {
          changeTabs(id) {
            this.tabIdx = id;
            let comname = "";
            switch (id) {
              case 111:
                comname = "lqbCates";
                break;
              case 222:
                comname = "lqbPick";
                break;
              default:
                comname = "lqbCommon";
                break;
            }
            this.$parent.setComName(comname);
          },
        },
        created() {
          const promise = request("https://m.lanqb.com/api/course-group-list");
          promise.then(data => {
            this.tabs = data.course_fields;
            // console.log(this.tabs);
          });
        },
      };

      // 分类组件
      const lqbCates = {
        template: "#lqb_cates",
        data() {
          return {
            themes: [],
            cates: [],
            curPage: 1, // 页码
            isloading: true, // 是否显示加载中
            curType: 2, // 排序默认选中综合
            // isCheckAll: true, // 主题默认选中全部
            themesItem: [], // 记录的都是当前选中的单个主题id
          };
        },
        computed: {
          isCheckAll() {
            return this.themesItem.length ? false : true;
          },
        },
        methods: {
          loadMore(e) {
            if (
              e.target.scrollTop + e.target.clientHeight >=
              e.target.scrollHeight
            ) {
              // 触底：加载下一页数据
              this.curPage++;
              this.isloading = true; // 显示loading
              let url = "";
              if (this.themesItem.length > 0) {
                course_subjects_ids = this.themesItem.join(",");
                url = `https://m.lanqb.com/api/course/video?type=${this.curType}&course_subjects_ids=${course_subjects_ids}&page=${this.curPage}`;
              } else {
                url = `https://m.lanqb.com/api/course/video?type=${this.curType}&page=${this.curPage}`;
              }
              request(url).then(data => {
                // this.cates = this.cates.concat(data.data);
                this.cates = [...this.cates, ...data.data];
                this.isloading = false; // 关闭loading
              });
            }
          },
          changeSortType(type) {
            this.curType = type;
            let url = "";
            if (this.themesItem.length > 0) {
              course_subjects_ids = this.themesItem.join(",");
              url = `https://m.lanqb.com/api/course/video?type=${type}&course_subjects_ids=${course_subjects_ids}&page=1`;
            } else {
              url = `https://m.lanqb.com/api/course/video?type=${type}&page=1`;
            }
            request(url).then(data => {
              this.cates = data.data;
            });
          },
          changeTheme(theme) {
            const idx = this.themesItem.indexOf(theme.id);
            if (idx == -1) {
              this.themesItem.push(theme.id);
            } else {
              this.themesItem.splice(idx, 1);
            }
            let url = "";
            if (this.themesItem.length > 0) {
              course_subjects_ids = this.themesItem.join(",");
              url = `https://m.lanqb.com/api/course/video?type=${this.curType}&course_subjects_ids=${course_subjects_ids}&page=1`;
            } else {
              url = `https://m.lanqb.com/api/course/video?type=${this.curType}&page=1`;
            }
            request(url).then(data => {
              this.cates = data.data;
            });
          },
        },
        created() {
          request("https://m.lanqb.com/api/course-group-list").then(data => {
            this.themes = data.course_subjects;
            // console.log(this.themes[0]);
          });
          request("https://m.lanqb.com/api/course/video?type=2&page=1").then(
            data => {
              this.cates = data.data;
              this.isloading = false;
            }
          );
        },
        components: {
          lqbItem,
        },
      };
      // 精选组件
      const lqbPick = {
        template: "#lqb_pick",
        data() {
          return {
            picks: [],
            news: [],
            frees: [],
          };
        },
        created() {
          // 精选课程
          const p1 = request(
            "https://m.lanqb.com/api/course/video?is_recommend=Y&limit=8&not_ids="
          );
          p1.then(data => {
            this.picks = data.data;
          });
          // 最新上架
          const p2 = request(
            "https://m.lanqb.com/api/course/video?type=1&limit=8&not_ids=1273,1143,529,1413,1233,1281,1210,1426"
          );
          p2.then(data => {
            this.news = data.data;
          });
          // 限时免费
          const p3 = request(
            "https://m.lanqb.com/api/course/video?is_free=Y&limit=8&not_ids=1273,1143,529,1413,1233,1281,1210,1426,1473,1471,1463,1462,1461,1460,1459,1458"
          );
          p3.then(data => {
            this.frees = data.data;
          });
        },
        components: {
          lqbItem,
        },
      };
      // 通用组件
      const lqbCommon = {
        template: "#lqb_common",
      };
      const vm = new Vue({
        el: "#app",
        data: {
          comName: "lqbPick",
        },
        methods: {
          setComName(name) {
            this.comName = name;
          },
        },
        components: {
          lqbTabs,
          lqbCates,
          lqbCommon,
          lqbPick,
        },
      });
    </script>
  </body>
</html>
